<template>
  <section  v-if="currDefine">
    <div class="title" >一、定义信息</div>
    <el-form label-width="80px" >
      <el-form-item label="标题">
        <el-input size="mini" v-model="currDefine.title"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select size="mini" v-model="currDefine.modelType" @change="selModelType" :disabled="currDefine.id?true:false">
          <el-option v-for="type in modelTypeList" :key="type.code" :value="type.val" :label="type.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计算类型">
        <el-select size="mini" v-model="currDefine.computeType" :disabled="currDefine.id?true:false">
          <el-option v-for="type in computeTypeList" :key="type.code" :value="type.val" :label="type.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form label-width="80px" inline>
      <el-form-item label="开始时间">
        <el-date-picker size="mini" v-model="currDefine.start" type="datetime"
                        placeholder="选择日期时间" default-time="12:00:00"
                        format="yyyy-MM-dd HH:mm:ss" value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker size="mini" v-model="currDefine.end" type="datetime"
                        placeholder="选择日期时间" default-time="12:00:00"
                        format="yyyy-MM-dd HH:mm:ss" value-format="timestamp">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="title" >二、定义内容</div>
    <el-form label-width="80px" :disabled="currDefine.id?true:false">
      <el-form-item label="公司部门">
        <filter-tool type="departmentId" test="name" :selVal="department?[department.companyId,departmentId]:[]"  v-on:confirm="getDepartmentId"></filter-tool>
      </el-form-item>
      <el-form-item label="内容类型">
        <sel-content-type :item="currDefine" v-on:change="changeContentType" ></sel-content-type>
      </el-form-item>
      <el-form-item label="内容详情" v-if="departmentId">
        <el-row>
          <el-col :span="2">
            {{currDefine.contentValue}}
          </el-col>
          <el-col :span="10">
            <el-button size="mini" type="text" @click="show = !show">{{show?'<<< '+'收起' :'展开'+' >>>'}}</el-button>
          </el-col>
        </el-row>
        <el-row v-if="show">
          <sel-content-val :item="currDefine" :departmentId="departmentId" v-on:selVal="selValEvent"></sel-content-val>
        </el-row>
      </el-form-item>
    </el-form>
    <div style="margin-left: 80px">
      <el-button size="mini" :type="currDefine.id?'success':'primary'" @click="confirmBtn">{{currDefine.id?'保存':'保存'}}</el-button>
    </div>
  </section>
</template>

<script>
  import filterTool from '@/common/filterTool'
  import selContentVal from '@/common/selContentVal'
  import selContentType from '@/common/selContentType'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "newGiftDefine",
    props:['giftDefine'],
    components:{selContentVal, selContentType,filterTool},
    data(){
      return {
        currDefine:null,
        computeTypeList:[
          {name:'系统',code:'system',val:1},
          {name:'营销',code:'marketing',val:2},
          {name:'用户',code:'member',val:3},
        ],
        modelTypeList:[
          {name:'分享',code:'share',val:1},
          {name:'广告',code:'ad',val:2}
        ],
        departmentId:null,
        department:null,
        show:false
      }
    },
    watch:{
      departmentId(nv,ov){
        if(nv){
          // this.show=false
        }
      }
    },
    created(){
      console.log('编辑时有默认giftDefine-----------',this.giftDefine)
      if(this.giftDefine.id){
        this.getGiftDefine(this.giftDefine.id)
      }else {
        this.currDefine=this.giftDefine
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getGiftDefine(id){
        this.fetch({name:"getGiftDefine",data:{id}})
          .then(res=>{
            console.log('当前回报定义---------',res)
            this.currDefine=res
            this.getDepartmentById(res.data.departmentId)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartmentById(id){
        this.fetch({name:"getDepartmentById",data:{id}})
          .then(res=>{
            console.log('当前部门，带公司---------',res)
            this.department=res
            this.departmentId=res.id
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartmentId(e){
        console.log('得到部门----',e)
        this.show=false
        this.departmentId=e.departmentId
        this.currDefine.data.departmentId=this.departmentId
        this.currDefine.contentValue=null
      },
      changeContentType(){
        this.show=false
        this.currDefine.contentValue=null
      },
      confirmBtn(){
        console.log('save----',this.currDefine.data)
        this.$emit('confirm',this.currDefine)
      },
      selValEvent(e){
        this.currDefine.contentValue=e
      },
      selModelType(e){
        if(e === 2){//是广告，只能有一个computeType
          this.currDefine.computeType=1
        }else {
          this.currDefine.computeType = null
        }
      }
    }
  }
</script>

<style scoped>
  .title{
    margin-left: 50px;
    font-size: 16px;
    line-height: 50px
  }
</style>
